//封装defineReactive函数，主要是为了对单个数据做数据劫持（数据劫持的核心代码）
function defineReactive(_data, key, value) {
  Object.defineProperty(_data, key, {
    get() {
      console.log("正在获取" + key + "的值");
      return value;
    },
    set(newVal) {
      if (newVal === value) return;

      console.log("正在设置" + key + "的值");
      value = newVal;
    },
  });
}

//2.封装一个observe函数，接收_data,遍历_data的值，一个个的进行数据劫持
function observe(_data) {
  for (let key of Object.keys(_data)) {
    //把每一个数据的响应式核心代码交给defineReactive函数处理
    defineReactive(_data, key, _data[key]);
  }
}

//1. 封装一个Vue的构造函数
function Vue(options) {
  //把options配置对象内的data,放在实例对象this的_data属性上
  this._data = options.data;

  //【进行数据代理】,把_data中的属性取出来,一个个的放在vue实例上
  for (let key of Object.keys(this._data)) {
    Object.defineProperty(this, key, {
      get() {
        return this._data[key];
      },
      set(newVal) {
        this._data[key] = newVal;
      },
    });
  }

  //拿到_data的数据开始进行响应式操作，我们首先把响应式操作的代码放在observe函数中
  observe(this._data);
}

//实例化Vue
const vm = new Vue({
  data: {
    count: 1,
    course: {
      type: "easy",
      name: "vue",
    },
  },
});

console.log(vm);
function huoqu() {
  console.log(vm.count);
}

function shezhi() {
  vm.count++;
}

// huoqu();
shezhi();
